<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!doctype html>

<html>

<head>
    <meta charset="utf-8" />
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache" />
    <META HTTP-EQUIV="Expires" CONTENT="0" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="format-detection" content="telephone=no" />
    <title>手机支付</title>
    <link rel="stylesheet" type="text/css" href="https://testmobile.payeco.com:443/ppi/web/css/common.css?v=1.1.6" />
    <!-- 横竖屏样式 -->
    <link rel="stylesheet" type="text/css" href="https://testmobile.payeco.com:443/ppi/web/css/320.css?v=1.1.6" media="(orientation:portrait) and (max-width: 350px) , (orientation:landscape) and (max-height: 350px)" />
    <link rel="stylesheet" type="text/css" href="https://testmobile.payeco.com:443/ppi/web/css/400.css?v=1.1.6" media="(orientation:portrait) and (min-width: 350px) and (max-width:450px) , (orientation:landscape) and (min-height: 350px) and (max-height:450px)"
            />
    <link rel="stylesheet" type="text/css" href="https://testmobile.payeco.com:443/ppi/web/css/480.css?v=1.1.6" media="(orientation:portrait) and (min-width: 450px) and (max-width:640px) , (orientation:landscape) and (min-height: 450px) and (max-height:640px)"
            />
    <link rel="stylesheet" type="text/css" href="https://testmobile.payeco.com:443/ppi/web/css/640.css?v=1.1.6" media="(orientation:portrait) and (min-width: 640px) , (orientation:landscape) and (min-height: 640px)" />
    <link rel="stylesheet" type="text/css" href="https://testmobile.payeco.com:443/ppi/web/css/validform.css" />
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/artDialog/artDialog.js?v=1"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/common.js?v=1.1.6"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/encripty/jsbn.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/encripty/prng4.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/encripty/rng.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/encripty/rsa.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/encripty/base64.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/Validform_v5.3.2_min.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/Validform_toruk_expand.js"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/keybord/jquery.passwordKeybord.min.js?v=1.1.6"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/keybord/jquery.bankCreditKeybord.min.js?v=1.1.6"></script>
    <script type="text/javascript" src="https://testmobile.payeco.com:443/ppi/web/js/keybord/jquery.numberKeybord.min.js?v=1.1.6"></script>
    <link rel="stylesheet" type="text/css" href="https://testmobile.payeco.com:443/ppi/web/js/keybord/keybord.css?v=1.1.6" />
    <style>
        .hide {display: none}
    </style>
    <script type="text/javascript">
        var rsaModule = "c9d5f286315ff23949d8d72b050a4d323cfe1b7cea250bf9d30321e6a2c7abfb5cb378bb7262c7e2b58a27148b1704aa0063048084d13e65275766ce00e73b7810aa14f93dc8a01c82a0a82fa42b8ec7cae0200a82dceffde6919bf67eab287476b33e443d3d1a054503001d852588c0f52cbe9144716b9d843ad44aa254a613";
        var rsaExponent = "10001";
        var vform = [];
        var vcheck = [
            []
        ];
        var vpage = [];
        //第一页面加载
        $(function() {
            pageInit();
            // 鑫合汇IOS兼容定制代码
        });

        function beforeCheck() {
            var vc = vcheck[getPageIndex()];
            if (vc.length) {
                for (var i in vc) {
                    var check = vc[i]();
                    if (check) {
                        if (typeof(check) == "string") {
                            zAlert(check);
                        } else {
                            check.input.errorTip(check.msg).show();
                        }
                        return false;
                    }
                }
            }
            loadingShow();
            return true;
        }
        //页面初始化

        function pageInit() {}
        //加载新页面

        function loadNewPage(html, popStack) {
            var r = /^\s*\<\s*div/;
            var newPage = html;
            if (!r.test(html)) {
                var re = /<\/head>\s*<body>([\s\S]*)<\/body>/i;
                newPage = html.match(re)[1];
            }
            pageNext(newPage, popStack);
        }
        //超链接改造为ajax异步页面加载

        function aAjaxInit($div) {}
        //加载下一个页面

        function pageNext(newPage, popStack) {
            var lastPage = getLastPage();
            if (popStack == 'clear' || popStack == 'out') {
                //清栈
                var len = vpage.length;
                for (var i = 0; i < len; i++) {
                    vpage.shift().remove();
                    vcheck.shift();
                    vform.shift();
                }
                if (popStack == 'clear') {
                    vcheck.shift();
                    vcheck.push([]);
                    vform.shift();
                }
            }
            if (popStack != 'clear') {
                vpage.push(lastPage);
                vcheck.push([]);
            }
            lastPage.slideUp("fast", "linear");
            lastPage.after(newPage);
            if (popStack == 'clear') {
                lastPage.remove();
            }
            pageNextInit();
        }
        //加载下一个页面初始化操作

        function pageNextInit() {
            pageInit();
            formBiuld();
            //pluginInitOnLoad();
        }
        var pageBackOut = false;
        var closeDialogShow = false;
        var closeDialog;
        //返回上一个页面
        function pageBack() {
            if (pageBackOut) {
                if (typeof(pageBackOut) == "function") {
                    pageBackOut();
                    return;
                }
                exitPlugin();
                return;
            }
            if (loading) {
                loadingClose();
                return;
            }
            if (vpage.length == 0) {
                if (closeDialogShow) {
                    if (closeDialog) {
                        closeDialog.close();
                        closeDialog = null;
                        closeDialogShow = false;
                    }
                    return;
                }
                closeDialogShow = true;
                closeDialog = zConfirm("确认", "订单还未支付，您确定要离开吗？", "确认", "继续", function() {
                    //this.content('你同意了').time(2);
                    //notifyUnPayResult();
                    //调用本地能力退出插件
                    //exitPlugin();
                    postURl('${returnUrl}?respCode=W101&respDesc=订单未支付，用户主动退出插件！');
                    closeDialogShow = false;
                }, function() {
                    closeDialogShow = false;
                });
                return;
            }
            var div = vpage.pop();
            //div.show();
            div.slideDown("fast", "linear", function() {
                var lastPage = getLastPage();
                lastPage.remove();
            });
            vcheck.pop();
            vform.pop();
        }
        //获取当前页面下标

        function getPageIndex() {
            return $("div.page-view").length - 1;
        }

        function getLastPage() {
            return $("div.page-view:last");
        }
        var loading = null;

        function loadingShow() {
            loading = zWindow.loading("正在加载...");
        }

        function loadingClose() {
            if (loading) {
                loading.close();
                loading = null;
            }
        }

        function receiveSMS(smsCode) {
            getLastPage().find(".smsCode").val(smsCode);
        }

        function alertTimeoutErr() {
            zAlert("请求超时，请检查网络后重试！");
        }

        function alert404Err() {
            zAlert("您访问的页面不存在！");
        }

        function alert500Err() {
            zAlert("发生500错误！");
        }

        function zConfirm(title, content, submitBtn, cancelBtn, submitFun, cancelFun) {
            return artDialog({
                id: 'art_confirm',
                title: false,
                content: content,
                //width: zWidth,
                padding: '20px',
                lock: true,
                fixed: true,
                opacity: 0.1,
                button: [{
                    name: submitBtn,
                    callback: submitFun,
                    className: 'aui_state_highlight',
                    focus: true
                }, {
                    name: cancelBtn,
                    callback: cancelFun,
                    className: 'aui_state_highlight'
                }]
            });
        }

        function zAlert(content, callback, okval) {
            return artDialog({
                id: 'art_alert',
                title: false,
                //width: zWidth,
                //icon: 'warning',
                fixed: true,
                lock: true,
                opacity: 0.1,
                okVal: (!okval ? "确 定" : okval),
                padding: '20px',
                content: content,
                ok: function(here) {
                    return callback && callback.call(this, here);
                }
            });
        }
        var Toast = function(config) {
            this.context = config.context == null ? $('body') : config.context; //上下文
            this.message = config.message; //显示内容
            this.time = config.time == null ? 3000 : config.time; //持续时间
            this.left = config.left; //距容器左边的距离
            this.top = config.top; //距容器上方的距离
            this.init();
        }
        var msgEntity;
        Toast.prototype = {
            //初始化显示的位置内容等
            init: function() {
                $("#toastMessage").remove();
                //设置消息体
                var msgDIV = new Array();
                msgDIV.push('<div id="toastMessage">');
                msgDIV.push('<span>' + this.message + '</span>');
                msgDIV.push('</div>');
                msgEntity = $(msgDIV.join('')).appendTo(this.context);
                //设置消息样式
                var top = this.top == null ? this.context.height() - 20 : this.top;
                msgEntity.css({
                    position: 'absolute',
                    top: top,
                    'z-index': '99',
                    left: 0,
                    'background-color': 'black',
                    color: 'white',
                    'font-size': '18px',
                    padding: '10px',
                    margin: '10px'
                });
                var left = this.left == null ? this.context.width() / 2 - msgEntity.width() / 2 : this.left;
                left -= 20;
                msgEntity.css({
                    left: left
                });
                msgEntity.hide();
            },
            //显示动画
            show: function() {
                msgEntity.fadeIn(this.time / 2);
                var time = this.time;
                setTimeout(function() {
                    msgEntity.fadeOut(time / 2);
                }, 10000);
            }
        }
    </script>
    <style type="text/css">
        a{
            text-decoration: none;
        }
    </style>
</head>

<body>

<div class="page-view">

    <!--header-->

    <header>
        <div class="header-wrap">
            <div class="header-con">

                <a href="javascript:pageBack();" class="back-btn" title="返回">返回</a>

                <div class="logo">手机支付</div>
            </div>
        </div>
    </header>

    <!--步骤进度-->

    <!--订单信息-->

    <div class="m-info-tb">
        <div class="pay-info">
            <p>
                支付金额：<span>￥<fmt:formatNumber value="${params['amount']}" pattern="###,###.##" /></span>
            </p>
        </div>
    </div>

    <form action="process.html" method="post" class="vform" onkeypress="if(event.keyCode==13||event.which==13){return false;}" onsubmit="return check()">

        <div class="m-form mgt10">

            <!-- 输入手机号码 -->
            <div class="form-item ${params['real_name'] ne '' && params['real_name'] ne null ? 'hide':''}">
                <div class="m-item">
                    <label class="label">姓名：</label>
                    <div class="input-wrap">
                        <input type="text" class="s-input bankAcc" maxlength="11" name="real_name" id="real_name" value="${params['real_name']}" placeholder="请输入姓名" datatype="m" />
                        <input type="hidden" id="real_nameFlag" value="${params['real_name'] ne '' && params['real_name'] ne null ? '1':'0'}">
                    </div>
                </div>
            </div>
        </div>

        <div class="m-form mgt10">

            <!-- 输入手机号码 -->
            <div class="form-item ${params['cert_no'] ne '' && params['cert_no'] ne null ? 'hide':''}">
                <div class="m-item">
                    <label class="label">身份证号：</label>
                    <div class="input-wrap">
                        <input type="text" class="s-input bankAcc" maxlength="18" name="cert_no" id="cert_no" value="${params['cert_no']}" placeholder="请输入身份证号码" datatype="m" />
                        <input type="hidden" id="cert_noFlag" value="${params['cert_no'] ne '' && params['cert_no'] ne null ? '1':'0'}">
                    </div>
                </div>
            </div>
        </div>


        <div class="m-form mgt10">

            <!-- 输入银行卡号 -->

            <div class="form-item ${params['card_number'] ne '' && params['card_number'] ne null ? 'hide':''}">
                <div class="m-item">
                    <label class="label">银行卡号：</label>
                    <div class="input-wrap">
                        <input type="text" class="s-input bankAcc" maxlength="19" name="card_number" id="card_number" value="${params['card_number']}" placeholder="请输入储蓄卡号" datatype="m" />
                    </div>
                </div>
            </div>
            <c:forEach items="${params}" var="p">
                <c:if test="${p.key ne 'mobile' && p.key ne 'card_number' && p.key ne 'real_name' && p.key ne 'cert_no'}">
                <input type="hidden" name="${p.key}" value="${p.value}">
                </c:if>
            </c:forEach>
        </div>

        <div class="m-form mgt10">

            <!-- 输入手机号码 -->
            <div class="form-item ${params['mobile'] ne '' && params['mobile'] ne null ? 'hide':''}">
                <div class="m-item">
                    <label class="label">手机号码：</label>
                    <div class="input-wrap">
                        <input type="text" class="s-input bankAcc" maxlength="11" name="mobile" id="mobile" value="${params['mobile']}" placeholder="请输入手机号码" datatype="m" />
                        <input type="hidden" id="mobileFlag" value="${params['mobile'] ne '' && params['mobile'] ne null ? '1':'0'}">
                    </div>
                </div>
            </div>
        </div>

        <div class="m-form mgt10">

            <!-- 输入手机号码 -->

            <div class="form-item">
                <div class="m-item">
                    <label class="label">推荐人手机：</label>
                    <div class="input-wrap">
                        <input type="text" class="s-input bankAcc" maxlength="11" name="referee" id="referee" value="" placeholder="请输入推荐人手机" datatype="m" />
                    </div>
                </div>
            </div>
        </div>
        <!--表单-->

        <div class="button-bar mgt30">
            <button type="submit" class="m-button">下 一 步</button>
        </div>
    </form>

    <div class="m-tip mgt15">温馨提示：无需开通网银</div>

    <!--<footer>
 <p>易联支付有限公司 &copy; 版权所有</p>
</footer> -->
</div>
<script type="text/javascript">

    var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
        21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
        33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
        42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
        51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
        63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
    };

    isCardNo = function(card)
    {
        //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
        if(reg.test(card) === false)
        {
            return false;
        }

        return true;
    };

    checkProvince = function(card)
    {
        var province = card.substr(0,2);
        if(vcity[province] == undefined)
        {
            return false;
        }
        return true;
    };

    checkBirthday = function(card)
    {
        var len = card.length;
        //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
        if(len == '15')
        {
            var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
            var arr_data = card.match(re_fifteen);
            var year = arr_data[2];
            var month = arr_data[3];
            var day = arr_data[4];
            var birthday = new Date('19'+year+'/'+month+'/'+day);
            return verifyBirthday('19'+year,month,day,birthday);
        }
        //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
        if(len == '18')
        {
            var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
            var arr_data = card.match(re_eighteen);
            var year = arr_data[2];
            var month = arr_data[3];
            var day = arr_data[4];
            var birthday = new Date(year+'/'+month+'/'+day);
            return verifyBirthday(year,month,day,birthday);
        }
        return false;
    };

    verifyBirthday = function(year,month,day,birthday)
    {
        var now = new Date();
        var now_year = now.getFullYear();
        //年月日是否合理
        if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day)
        {
            //判断年份的范围（3岁到100岁之间)
            var time = now_year - year;
            if(time >= 3 && time <= 100)
            {
                return true;
            }
            return false;
        }
        return false;
    };


    checkParity = function(card)
    {
        //15位转18位
        card = changeFivteenToEighteen(card);
        var len = card.length;
        if(len == '18')
        {
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var cardTemp = 0, i, valnum;
            for(i = 0; i < 17; i ++)
            {
                cardTemp += card.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[cardTemp % 11];
            if (valnum == card.substr(17, 1))
            {
                return true;
            }
            return false;
        }
        return false;
    };

    changeFivteenToEighteen = function(card)
    {
        if(card.length == '15')
        {
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var cardTemp = 0, i;
            card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
            for(i = 0; i < 17; i ++)
            {
                cardTemp += card.substr(i, 1) * arrInt[i];
            }
            card += arrCh[cardTemp % 11];
            return card;
        }
        return card;
    };

    $(function(){

        var code = '${code}';

        if(code != '0000'){
            zAlert("${message}",function(){
                postURl('${returnUrl}?respCode=${code}&respDesc=${message}');
                //postURl('http://www.baidu.com/v1/core/remote/return?respCode=W101&respDesc=订单未支付，用户主动退出插件！');
            });
        }


    });

    function check(){

        var mobile = $("#mobile").val();
        var mobileFlag = $("#mobileFlag").val();
        var realNameFlag = $("#real_nameFlag").val();
        var certNoFlag = $("#cert_noFlag").val();




        var realName = $("#real_name").val();
        if(realName == "" || realName.length == 0){
            zAlert("请输入真实姓名!");
            return false;
        }

        var cert_no = $("#cert_no").val();
        if(cert_no == "" || cert_no.length == 0 || (cert_no.length != 15 && cert_no.length != 18)){
            zAlert("请输入正确身份证号!");
            return false;
        }

        if(isCardNo(cert_no) === false)
        {
            zAlert('您输入的身份证号码不正确，请重新输入');
            return false;
        }

        if(checkProvince(cert_no) === false)
        {
            zAlert('您输入的身份证号码不正确,请重新输入');
            return false;
        }

        if(checkBirthday(cert_no) === false)
        {
            alert('您输入的身份证号码生日不正确,请重新输入');
            return false;
        }

        if(checkParity(cert_no) === false)
        {
            zAlert('您的身份证校验位不正确,请重新输入');
            return false;
        }

        var cardno = $("#card_number").val();
        if(cardno == "" || cardno.length == 0 || ( cardno.length != 16 && cardno.length != 19 )){
            zAlert("请输入正确银行卡号!");
            return false;
        }
        var reg = /^\d{16,19}$/;
        if(!reg.test(cardno)){
            zAlert("请输入正确银行卡号!");
            return false;
        }

        if(mobileFlag == 0){
            if(mobile == "" || mobile.length == 0 || mobile.length != 11){
                zAlert("请输入正确手机号码!");
                return false;
            }
            var mobilereg = /^\d{11}$/;
            if(!mobilereg.test(mobile)){
                zAlert("请输入正确手机号码!");
                return false;
            }
        }

        return true;
    }

</script>
</body>

</html>